<template>
    <div v-if="!loginStatus">
        <n-button @click="openLoginOrRegister">登录/注册</n-button>
        <login-modal
            :show="loginOrRegisterModalShow"
            :mask-closable="true"
            @update="loginOrRegisterUpdateHandler"
            @login-success="loginSuccessHandler"
            @register-success="registerSuccessHandler"
        />
    </div>
    <n-dropdown v-else :options="avatarOptions">
        <hover-container>
            <n-space vertical item-style="line-height: 0;">
                <n-space>
                    <n-avatar round size="large" style="background-color: #8076a3">
                        {{ loginInfo?.nickname.charAt(0).toUpperCase() }}
                    </n-avatar>
                    <user-level-tag content-class="mt-1" :level="loginInfo ? loginInfo.level : 0" />
                </n-space>
            </n-space>
        </hover-container>
    </n-dropdown>
</template>

<script setup lang="ts">
import { AccessibilityOutline, ExitOutline } from '@vicons/ionicons5';
import { DropdownOption, NProgress } from 'naive-ui';
import { computed, h, ref, Ref } from 'vue';

import { renderIcon } from '@/utils/common/index';

import { useAuthStore } from '~/src/store';

const authStore = useAuthStore();
defineOptions({ name: 'LoginButton' });

/** 头像 */
let progressPercentage = computed(() => {
    return authStore.userInfo
        ? (authStore.userInfo.experience / authStore.userInfo.nextExperience) * 100
        : 0;
});
const avatarOptions: DropdownOption[] = [
    {
        key: 'user-level',
        type: 'render',
        render: () => {
            return h(
                'div',
                {
                    style: 'display: flex; align-items: center; padding: 8px 12px;'
                },
                [
                    h(
                        NProgress,
                        {
                            type: 'line',
                            percentage: progressPercentage.value,
                            showIndicator: true,
                            processing: true,
                            indicatorPlacement: 'inside'
                        },
                        [
                            h('div', null, {
                                default: () =>
                                    `${authStore.userInfo?.experience | 0} / ${authStore.userInfo?.nextExperience | 0}`
                            })
                        ]
                    )
                ]
            );
        }
    },
    {
        type: 'divider',
        key: 'divider'
    },
    {
        label: '用户中心',
        key: 'user-center',
        icon: renderIcon(AccessibilityOutline)
    },
    {
        label: '退出登录',
        key: 'logout',
        icon: renderIcon(ExitOutline),
        props: {
            onClick: () => logout()
        }
    }
];

/** 打开登录或注册框 */
let loginInfo: Ref<Auth.UserInfo | null> = ref(authStore.userInfo);
let loginStatus = ref(authStore.isLogin);
let loginOrRegisterModalShow = ref(false);
async function openLoginOrRegister() {
    loginOrRegisterModalShow.value = true;
}
/** 更新登录或注册框状态 */
async function loginOrRegisterUpdateHandler(val: boolean) {
    loginOrRegisterModalShow.value = val;
}

/** 登录状态更新 */
async function loginSuccessHandler() {
    loginStatus.value = authStore.isLogin;
    loginInfo.value = authStore.userInfo;
    loginOrRegisterModalShow.value = false;
}

/** 注册状态更新 */
async function registerSuccessHandler() {
    loginOrRegisterModalShow.value = false;
}

/** 登出 */
async function logout() {
    await authStore.logoutHandler();
    loginStatus.value = authStore.isLogin;
    loginInfo.value = authStore.userInfo;
}
</script>

<style>
.n-progress-graph-line-rail {
    text-align: center;
}
</style>
